<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        /* display the svg and input in a centered column */
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #fffaf0;
        }

        svg {
            display: block;
            width: 200px;
            height: auto;
        }

        /* style the input of type range to highlight two dots atop a thin line
the whole thing is optimized for chrome and should be carefully considered for cross-browser support
*/
        input[type="range"] {
            margin-top: 2.5rem;
            width: 300px;
            -webkit-appearance: none;
            height: 1rem;
            background: transparent;
            color: #0d3730;
            position: relative;
            cursor: e-resize;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0d3730;
        }

        input[type="range"]:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            background: #0d3730;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: -5;
        }

        input[type="range"]:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border-left: 2px solid #0d3730;
            border-right: 2px solid #0d3730;
            z-index: -5;
        }
    </style>
</head>

<body>
    <svg width="200" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1" enable-background="new 0 0 200 200"
        xml:space="preserve">
        <g>
            <g id="fuzi" stroke="null">
                <path fill="#F4DD50" transform="translate(-0.4 0) scale(0.8 0.8)" option="0"
                    d="m130.53337,103.74999l63.875,37.90909l0,63.18182l-63.875,37.90909l-63.875,-37.90909l0,-63.18182l63.875,-37.90909z"
                    id="svg_17" stroke="null" />
                <path fill="#e7402e" transform="translate(-20 -30) scale(0.6 0.6)"
                    d="m208.8534,211.49092l63.875,37.90909l0,63.18182l-63.875,37.90909l-63.875,-37.90909l0,-63.18182l63.875,-37.90909z"
                    id="svg_18" stroke="null" />
                <text transform="rotate(180 105 148) matrix(1.25 0 0 1.25 90 95)" fill="#000000"
                    font-family="'MicrosoftYaHei'" font-size="29" id="svg_17" x="-2" y="60" stroke-width="3"
                    font-weight="bold">福</text>
                <text fill="#e7402e" font-family="'MicrosoftYaHei'" font-size="18" id="svg_18" x="75" y="40"
                    stroke-width="3" font-weight="bold">给个赞呗</text>
            </g>
            <g id="bomb">
                <path id="motion-path" fill="none" d="m0,0l0,5a10,10 0 0 1 -20,0a18,18 0 0 0 -36,0l0,30" />
                <path stroke="null" fill="#E7402E"
                    d="m149.17433,213.24695c0,11.83309 -7.94387,21.51372 -17.65204,21.51372l-58.69101,0c-9.70908,0 -17.65295,-9.68062 -17.65295,-21.51372l0,-108.80346c0,-11.83309 7.94387,-21.51482 17.65295,-21.51482l58.69101,0c9.70817,0 17.65204,9.68173 17.65204,21.51482l0,108.80346z"
                    id="svg_1" />
                <path stroke="null" fill="#F4DD50"
                    d="m131.1467,234.76267c9.91474,0 18.02763,-8.789 18.02763,-19.531l0,-2.806c0,-10.741 -0.41538,-19.53 -0.92215,-19.53l-94.1517,0c-0.50769,0 -0.92215,8.789 -0.92215,19.53l0,2.806c0,10.742 8.1129,19.531 18.02856,19.531l59.93981,0z"
                    id="svg_2" />
                <path stroke="null" fill="#3D100B"
                    d="m131.48444,237.69167l-59.61522,0c-11.37036,0 -20.62089,-10.076 -20.62089,-22.461l0,-2.807c0,-5.244 0.0964,-10.195 0.27267,-13.943c0.08814,-1.863 0.19096,-3.344 0.30756,-4.396c0.07069,-0.637 0.14414,-1.113 0.23227,-1.498c0.56921,-2.496 2.42831,-2.622 2.79462,-2.622l93.64185,0c0.36631,0 2.22541,0.126 2.79554,2.622c0.08814,0.385 0.16158,0.861 0.23135,1.498c0.1166,1.055 0.21942,2.533 0.30664,4.396c0.17627,3.748 0.2745,8.699 0.2745,13.943l0,2.807c-0.00092,12.385 -9.25145,22.461 -20.62089,22.461l0,0zm-74.41551,-41.868c-0.22126,2.823 -0.44068,8.557 -0.44068,16.602l0,2.806c0,9.154 6.83691,16.603 15.24189,16.603l59.6143,0c8.40406,0 15.2428,-7.447 15.2428,-16.603l0,-2.806c0,-8.045 -0.21942,-13.778 -0.43976,-16.602l-89.21856,0l0.00001,0z"
                    id="svg_3" />
                <path stroke="null" fill="#3D100B"
                    d="m131.68897,237.69167l-59.02419,0c-11.25764,0 -20.41645,-11.31481 -20.41645,-25.22252l0,-110.91463c0,-13.90771 9.15882,-25.22252 20.41645,-25.22252l59.02419,0c11.25764,0 20.41645,11.31481 20.41645,25.22252l0,38.0477c0,1.81581 -1.19348,3.29136 -2.6642,3.29136s-2.66329,-1.47443 -2.66329,-3.29136l0,-38.0477c0,-10.27946 -6.76913,-18.64317 -15.09169,-18.64317l-59.02146,0c-8.32074,0 -15.09078,8.36259 -15.09078,18.64317l0,110.91463c0,10.27833 6.76913,18.64317 15.09078,18.64317l59.02419,0c8.31983,0 15.09078,-8.36259 15.09078,-18.64317l0,-35.36161c0,-1.81693 1.19348,-3.29024 2.66329,-3.29024c1.47072,0 2.66329,1.47331 2.66329,3.29024l0,35.36161c-0.00182,13.90771 -9.16063,25.22252 -20.41736,25.22252z"
                    id="svg_4" />
                <path fill="#3D100B"
                    d="m149.17433,176.31867c-1.618,0 -2.93,-1.313 -2.93,-2.93l0,-12.109c0,-1.619 1.312,-2.93 2.93,-2.93s2.931,1.311 2.931,2.93l0,12.109c-0.001,1.618 -1.313,2.93 -2.931,2.93z"
                    id="svg_5" />
                <path fill="#FFFFFF"
                    d="m112.045,91.86l-7.031,0c-1.618,0 -2.93,-1.312 -2.93,-2.93c0,-1.618 1.312,-2.93 2.93,-2.93l7.031,0c1.618,0 2.93,1.312 2.93,2.93c0,1.618 -1.312,2.93 -2.93,2.93zm-47.115,32.125c-1.618,0 -2.93,-1.312 -2.93,-2.93l0,-16.062c0,-10.473 7.107,-18.992 15.842,-18.992l12.913,0c1.618,0 2.93,1.312 2.93,2.93c0,1.618 -1.312,2.93 -2.93,2.93l-12.912,0c-2.529,0 -4.957,1.287 -6.836,3.624c-2.029,2.524 -3.147,5.901 -3.147,9.509l0,16.063c0,1.616 -1.311,2.928 -2.93,2.928z"
                    id="svg_6" />
                <g stroke="null" id="svg_7">
                    <path stroke="#3D100B" id="fuse" fill="none" stroke-width="5" transform="translate(0 -5)"
                        d="m174.004,43.03652l0,5.51568c0,6.09305 -6.09177,11.03271 -13.59835,11.03271c-7.51559,0 -13.59835,-4.93965 -13.59835,-11.03271c0,-10.96721 -10.96441,-19.85888 -24.48423,-19.85888s-24.47908,8.89299 -24.47908,19.85888l0,33.09945" />
                </g>
                <circle fill="#F4DD50" cx="102" cy="142" r="34" id="svg_10" />
                <rect x="120.36745" y="125.38426" transform="matrix(0.7071 0.7071 -0.7071 0.7071 101.112 -40)"
                    fill="#F4DD50" width="23.614" height="23.615" id="svg_11" />
                <g id="spark">
                    <path id="ember" transform="scale(2.1 2.1) translate(83 20)" stroke="#F3A37C" stroke-width="1.25"
                        d="m-4.5,-1.5l3,0l1.5,-3l1.5,3l3,0l-2.5,2.5l1.5,3.25l-3.5,-2l-3.5,2l1.5,-3.25l-2.5,-2.5z"
                        fill="#FFF9EE" />
                    <g id="sparkles" transform="scale(0)">
                        <g fill="#F3A37C">
                            <circle transform="rotate(10) translate(12 0)" cx="0" cy="0" r="2">
                            </circle>
                            <circle transform="rotate(170) translate(12 0)" cx="0" cy="0" r="2">
                            </circle>
                            <circle transform="rotate(90) translate(12 0)" cx="0" cy="0" r="2">
                            </circle>
                            <circle transform="rotate(-60) translate(13 0)" cx="0" cy="0" r="2">
                            </circle>
                            <circle transform="rotate(-120) translate(13 0)" cx="0" cy="0" r="1.75">
                            </circle>
                        </g>
                    </g>
                </g>
                <text transform="rotate(180 105 145) matrix(1.2 0 0 1.2 89 94)" fill="#e7402e"
                    font-family="'MicrosoftYaHei'" font-size="29" id="svg_13" x="2" y="54" stroke-width="3"
                    font-weight="bold">福</text>
            </g>
        </g>
    </svg>

    <input type="range" min="0" max="100" value="0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <script>
        const input = document.querySelector('input');

        const timeline = anime.timeline({
            update: ({ progress }) => {
                input.value = progress
            }
        });

        function handleInput() {
            const { value } = this;
            timeline.seek(timeline.duration * value / 100);
        }

        input.addEventListener('input', handleInput);
        input.addEventListener('mousedown', () => timeline.pause());
        input.addEventListener('mouseup', () => timeline.play());


        // 引线
        timeline.add({
            targets: '#fuse',
            strokeDashoffset: (target) => -target.getTotalLength(),
            duration: 5000,
            begin: (animation) => {
                const target = animation.animatables[0].target;
                const length = target.getTotalLength();
                target.setAttribute('stroke-dasharray', length);
            },
            easing: 'linear',
        });

        const motionPath = document.querySelector('#fuse');
        const path = anime.path(motionPath);
        timeline.add({
            targets: '#spark',
            translateX: path('x'),
            translateY: path('y'),
            rotate: path('angle'),
            duration: 5000,
            easing: 'linear',
        }, '-=5000');

        timeline.add({
            targets: '#ember',
            transform: Array(21).fill('scale(2.5)').map((scale, index) => index % 2 === 0 ? 'scale(1.4)' : scale),
            duration: 5000,
            easing: 'easeInOutSine',
            direction: 'alternate',
        }, '-=5000');

        timeline.add({
            targets: '#sparkles',
            transform: Array(21).fill('scale(1.5)').map((scale, index) => index % 2 === 0 ? 'scale(0)' : scale),
            duration: 5000,
            easing: 'easeInOutSine',
            direction: 'alternate',
        }, '-=5000');

        timeline.add({
            targets: '#spark',
            scale: 4.5,
            opacity: 0,
            duration: 250,
            easing: 'easeInOutSine',
        });

        timeline.add({
            targets: '#bomb',
            opacity: 0,
            duration: 250,
            easing: 'easeInOutSine',
        });

        timeline.add({
            targets: '#fuzi',
            opacity: [0, 1],
            duration: 300,
            delay: 50,
            easing: 'easeInOutSine',
        }, '-=250');
    </script>
</body>

</html>